掌握 WebXR 输入：深入探讨控制器状态管理

            const xrSession = await navigator.xr.requestSession('immersive-vr');

function handleInputSources(session) {
    session.inputSources.forEach(inputSource => {
        console.log('Input Source Type:', inputSource.targetRayMode);
        console.log('Input Source Gamepad:', inputSource.gamepad);
        console.log('Input Source Profiles:', inputSource.profiles);
    });
}

xrSession.addEventListener('inputsourceschange', () => {
    handleInputSources(xrSession);
});

handleInputSources(xrSession);

            

              
                Copy
              
            
          

            function updateControllerState(inputSource) {
    if (!inputSource.gamepad) return;

    const gamepad = inputSource.gamepad;

    // Example: Check if the 'A' button (often index 0) is pressed
    if (gamepad.buttons[0].pressed) {
        console.log('Primary button pressed!');
        // Trigger an action
    }

    // Example: Get the value of the primary trigger (often index 1)
    const triggerValue = gamepad.buttons[1].value; // Ranges from 0.0 to 1.0
    if (triggerValue > 0.1) {
        console.log('Trigger pulled:', triggerValue);
        // Apply force, select object, etc.
    }

    // Example: Get the horizontal value of the left thumbstick (often index 2)
    const thumbstickX = gamepad.axes[2]; // Ranges from -1.0 to 1.0
    if (Math.abs(thumbstickX) > 0.2) {
        console.log('Left thumbstick moved:', thumbstickX);
        // Handle locomotion, camera movement, etc.
    }
}

function animate() {
    if (xrSession) {
        xrSession.inputSources.forEach(inputSource => {
            updateControllerState(inputSource);
        });
    }
    requestAnimationFrame(animate);
}

animate();

            

              
                Copy
              
            
          

            let viewerReferenceSpace = null;
let gripSpace = null;
let targetRaySpace = null;

xrSession.requestReferenceSpace('viewer').then(space => {
    viewerReferenceSpace = space;

    // Request grip space relative to viewer space
    const inputSource = xrSession.inputSources[0]; // Assuming at least one input source
    if (inputSource) {
        gripSpace = viewerReferenceSpace.getOffsetReferenceSpace(inputSource.gripSpace);
        targetRaySpace = viewerReferenceSpace.getOffsetReferenceSpace(inputSource.targetRaySpace);
    }
});

function updateControllerPose() {
    if (viewerReferenceSpace && gripSpace && targetRaySpace) {
        const frame = xrFrame;
        const gripPose = frame.getPose(gripSpace, viewerReferenceSpace);
        const rayPose = frame.getPose(targetRaySpace, viewerReferenceSpace);

        if (gripPose) {
            // gripPose.position contains [x, y, z]
            // gripPose.orientation contains [x, y, z, w] (quaternion)
            console.log('Controller Position:', gripPose.position);
            console.log('Controller Orientation:', gripPose.orientation);
            // Update your 3D model or interaction logic
        }

        if (rayPose) {
            // This is the origin and direction of the targeting ray
            // Use this for raycasting into the scene
        }
    }
}

// Inside your XR frame loop:
function renderXRFrame(xrFrame) {
    xrFrame;
    updateControllerPose();
    // ... rendering logic ...
}

            

              
                Copy
              
            
          

            xrSession.addEventListener('selectstart', (event) => {
    const inputSource = event.inputSource;
    console.log('Select started on:', inputSource.profiles);
    // Trigger immediate action, like picking up an object
});

xrSession.addEventListener('squeezeend', (event) => {
    const inputSource = event.inputSource;
    console.log('Squeeze ended on:', inputSource.profiles);
    // Release an object, stop an action
});

// You can also listen for specific buttons via the gamepad API directly if needed

            

              
                Copy
              
            
          

            class ControllerStateManager {
    constructor(inputSource) {
        this.inputSource = inputSource;
        this.state = 'IDLE';
        this.isPrimaryButtonPressed = false;
        this.isGripPressed = false;
    }

    update() {
        const gamepad = this.inputSource.gamepad;
        if (!gamepad) return;

        const primaryButton = gamepad.buttons[0]; // Assuming index 0 is primary
        const gripButton = gamepad.buttons[2];  // Assuming index 2 is grip

        // Primary Button Logic
        if (primaryButton.pressed && !this.isPrimaryButtonPressed) {
            this.handleEvent('PRIMARY_PRESS');
            this.isPrimaryButtonPressed = true;
        } else if (!primaryButton.pressed && this.isPrimaryButtonPressed) {
            this.handleEvent('PRIMARY_RELEASE');
            this.isPrimaryButtonPressed = false;
        }

        // Grip Button Logic
        if (gripButton.pressed && !this.isGripPressed) {
            this.handleEvent('GRIP_PRESS');
            this.isGripPressed = true;
        } else if (!gripButton.pressed && this.isGripPressed) {
            this.handleEvent('GRIP_RELEASE');
            this.isGripPressed = false;
        }

        // Update state-specific logic here, e.g., joystick movement for locomotion
        if (this.state === 'MOVING') {
            // Handle locomotion based on thumbstick axes
        }
    }

    handleEvent(event) {
        switch (this.state) {
            case 'IDLE':
                if (event === 'PRIMARY_PRESS') {
                    this.state = 'INTERACTING';
                    console.log('Started interacting');
                } else if (event === 'GRIP_PRESS') {
                    this.state = 'GRABBING';
                    console.log('Started grabbing');
                }
                break;
            case 'INTERACTING':
                if (event === 'PRIMARY_RELEASE') {
                    this.state = 'IDLE';
                    console.log('Stopped interacting');
                }
                break;
            case 'GRABBING':
                if (event === 'GRIP_RELEASE') {
                    this.state = 'IDLE';
                    console.log('Stopped grabbing');
                }
                break;
        }
    }
}

// In your XR setup:
const controllerManagers = new Map();

xrSession.addEventListener('inputsourceschange', () => {
    xrSession.inputSources.forEach(inputSource => {
        if (!controllerManagers.has(inputSource)) {
            controllerManagers.set(inputSource, new ControllerStateManager(inputSource));
        }
    });
    // Clean up managers for disconnected controllers...
});

// In your animation loop:
function animate() {
    if (xrSession) {
        controllerManagers.forEach(manager => manager.update());
    }
    requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

            function getPrimaryAction(inputSource) {
    const profiles = inputSource.profiles;
    if (profiles.includes('oculus-touch')) {
        return 0; // Oculus Touch 'A' button
    } else if (profiles.includes('vive-wands')) {
        return 0; // Vive Wand Trigger button
    }
    // Add more profile checks
    return 0; // Fallback to a common default
}

function handlePrimaryAction(inputSource) {
    const buttonIndex = getPrimaryAction(inputSource);
    if (inputSource.gamepad.buttons[buttonIndex].pressed) {
        console.log('Performing primary action for:', inputSource.profiles);
        // ... your action logic ...
    }
}

            

              
                Copy
              
            
          

            function triggerHapticFeedback(inputSource, intensity = 0.5, duration = 100) {
    if (inputSource.gamepad && inputSource.gamepad.hapticActuators) {
        const hapticActuator = inputSource.gamepad.hapticActuators[0]; // Often the first actuator
        if (hapticActuator) {
            hapticActuator.playEffect('vibration', { 
                duration: duration, // milliseconds
                strongMagnitude: intensity, // 0.0 to 1.0
                weakMagnitude: intensity // 0.0 to 1.0
            }).catch(error => {
                console.error('Haptic feedback failed:', error);
            });
        }
    }
}

// Example: Trigger haptic feedback on primary button press
xrSession.addEventListener('selectstart', (event) => {
    triggerHapticFeedback(event.inputSource, 0.7, 50);
});

            

              
                Copy